Skip to content

DX-1128: localise presentational components (Badge/Button/LinkButton/FeaturedLink/Status)#3412

Merged
jamiehenson merged 2 commits into
mainfrom
dx-1128/docs-components-presentational
Jun 25, 2026
Merged

DX-1128: localise presentational components (Badge/Button/LinkButton/FeaturedLink/Status)#3412
jamiehenson merged 2 commits into
mainfrom
dx-1128/docs-components-presentational

Conversation

@jamiehenson

@jamiehenson jamiehenson commented Jun 17, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

Part of DX-1128. Localises the presentational components docs uses from @ably/ui.

What

Vendored into src/components/ui/ (rewired to local Icon/cn/colors): Badge, Button, LinkButton, FeaturedLink, Status, plus colors.ts and the Ably logo SVG. swr promoted to a direct dep.

Icon props (leftIcon/rightIcon, iconBefore/iconAfter) now take a ReactNode rather than an icon-name string: callers pass a Heroicon element or an Ably <Icon> glyph directly, and the component sizes it via a slot (preserving each component's original icon size). Internal Heroicon usages (Status, FeaturedLink, plus Footer's flag-gated feedback icons) are converted to direct @heroicons/react imports. Also fixes a noopenner→noopener rel typo in FeaturedLink.

Behaviour

No visual change intended.

Stack (DX-1128)

PR Role
#3409 Design foundation — vendor @ably/ui tokens + reset/core CSS (merged)
#3410 Local cn + heights utils
#3411 Docs-native Icon component (Ably glyphs only; Heroicons imported directly)
▶ #3412 Presentational components (Badge, Button, LinkButton, FeaturedLink, Status)
#3413 Interactive components (SegmentedControl, TabMenu)
#3414 ProductTile + product data (leaf)
#3415 syntax-highlighter util + registry
#3416 Code + CodeSnippet — completes the lift; prunes dead CSS + drops @ably/ui Tailwind scan

#3410–#3416 are a linear stack, each building on the previous; #3409 has merged to main. ▶ = this PR.

Testing

  • Load the review app.
  • Check a sufficient sample of pages load with no visual regressions.

🤖 Generated with Claude Code

@coderabbitai

coderabbitai Bot commented Jun 17, 2026 •
edited
Loading

Copy link
Copy Markdown

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: c2fff592-2800-497a-ae6e-aec96cb4e531

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch dx-1128/docs-components-presentational

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

This was referenced Jun 17, 2026
Merged
Open
Closed
@jamiehenson jamiehenson force-pushed the dx-1128/docs-local-icon branch from 4c74691 to 8b2ecc6 Compare June 18, 2026 13:18
@jamiehenson jamiehenson force-pushed the dx-1128/docs-components-presentational branch from ef72e03 to 02d982a Compare June 18, 2026 13:18
@jamiehenson jamiehenson marked this pull request as ready for review June 18, 2026 13:36
@jamiehenson jamiehenson force-pushed the dx-1128/docs-local-icon branch from 8b2ecc6 to 5d78500 Compare June 18, 2026 14:34
@jamiehenson jamiehenson force-pushed the dx-1128/docs-components-presentational branch from 02d982a to a74f1b6 Compare June 18, 2026 14:34
@jamiehenson jamiehenson added the review-app Create a Heroku review app label Jun 18, 2026
@ably-ci ably-ci temporarily deployed to ably-docs-dx-1128-docs--wewelg June 18, 2026 14:54 Inactive
@jamiehenson jamiehenson force-pushed the dx-1128/docs-local-icon branch from 5d78500 to 7e2f701 Compare June 18, 2026 14:56
@jamiehenson jamiehenson force-pushed the dx-1128/docs-components-presentational branch from a74f1b6 to e801746 Compare June 18, 2026 14:57
@ably-ci ably-ci temporarily deployed to ably-docs-dx-1128-docs--wewelg June 18, 2026 14:57 Inactive
@jamiehenson jamiehenson force-pushed the dx-1128/docs-local-icon branch from 7e2f701 to 0fa1f37 Compare June 18, 2026 15:50
@jamiehenson jamiehenson force-pushed the dx-1128/docs-components-presentational branch from e801746 to cee3a61 Compare June 18, 2026 15:50
@ably-ci ably-ci temporarily deployed to ably-docs-dx-1128-docs--wewelg June 18, 2026 15:50 Inactive
@jamiehenson jamiehenson marked this pull request as draft June 18, 2026 16:25
This was referenced Jun 18, 2026
Merged
Merged
Merged
Merged
Open
@jamiehenson jamiehenson force-pushed the dx-1128/docs-local-icon branch from 0fa1f37 to 52d51ca Compare June 23, 2026 13:25
@jamiehenson jamiehenson force-pushed the dx-1128/docs-components-presentational branch from cee3a61 to 88c9b9f Compare June 23, 2026 13:25
@ably-ci ably-ci temporarily deployed to ably-docs-dx-1128-docs--wewelg June 23, 2026 13:26 Inactive
@jamiehenson jamiehenson temporarily deployed to ably-docs-dx-1128-docs--wewelg June 23, 2026 14:11 Inactive
@jamiehenson jamiehenson force-pushed the dx-1128/docs-local-icon branch from 52d51ca to 6803b67 Compare June 23, 2026 16:51
@jamiehenson jamiehenson force-pushed the dx-1128/docs-components-presentational branch from 88c9b9f to 32bc1f7 Compare June 23, 2026 16:51
@jamiehenson jamiehenson temporarily deployed to ably-docs-dx-1128-docs--wewelg June 23, 2026 16:51 Inactive
@jamiehenson jamiehenson force-pushed the dx-1128/docs-components-presentational branch from 32bc1f7 to 2f29be3 Compare June 23, 2026 17:15
@jamiehenson jamiehenson marked this pull request as ready for review June 23, 2026 17:15
@jamiehenson jamiehenson temporarily deployed to ably-docs-dx-1128-docs--wewelg June 23, 2026 17:15 Inactive
@jamiehenson jamiehenson force-pushed the dx-1128/docs-components-presentational branch from 2f29be3 to d9f00ba Compare June 24, 2026 08:38
@jamiehenson jamiehenson temporarily deployed to ably-docs-dx-1128-docs--wewelg June 24, 2026 08:38 Inactive
@jamiehenson jamiehenson force-pushed the dx-1128/docs-components-presentational branch from d9f00ba to 9d02706 Compare June 25, 2026 07:33
@jamiehenson jamiehenson force-pushed the dx-1128/docs-local-icon branch from b724bbf to 6c83436 Compare June 25, 2026 07:33
@jamiehenson jamiehenson temporarily deployed to ably-docs-dx-1128-docs--wewelg June 25, 2026 07:34 Inactive
kennethkalmer
kennethkalmer approved these changes Jun 25, 2026
View reviewed changes

@kennethkalmer kennethkalmer left a comment •
edited
Loading

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewed against the @ably/ui source. Faithful vendoring — component diffs are entirely prettier/quote-style + import rewiring, no logic drift.

The icon-name→ReactNode flip is done right: the slot reapplies per-size dimensions (lg/md 1.5rem, sm 1.25rem, xs 1rem) matching the old [&>svg]:!w-6/5/4 button-base rules, and !w-full/!h-full overrides a glyph <Icon>'s own inline size. Traced the undefined-size path too (size ?? 'md' → w-6 = 24px ≡ new md = 1.5rem). Sizing preserved exactly. noopener typo fixed; Status/FeaturedLink internal heroicons sized to match (size-4 = 16px, calc(...) unchanged). All migrated-component call sites pass elements; no leftover @ably/ui/core/{Badge,Button,...} imports.

Approving. Two non-blocking notes inline.

~ 𝒢𝓁𝒶𝓊𝒹𝑒

Comment thread src/components/ui/Button.tsx
Comment thread src/components/ui/Button.tsx Outdated
Base automatically changed from dx-1128/docs-local-icon to main June 25, 2026 10:06
@jamiehenson
refactor(docs): localise presentational components (Badge/Button/Link…
fa0d218 
…Button/FeaturedLink/Status) (DX-1128)

Vendor Badge, Button, LinkButton, FeaturedLink and Status locally, off
@ably/ui/core. Their icon props (leftIcon/rightIcon, iconBefore/iconAfter) now
take a ReactNode rather than an icon name string: callers pass a Heroicon
component or an Ably glyph <Icon> directly, and the component sizes it via a
slot. This drops the name->component indirection so Heroicons tree-shake, and
matches the glyphs-only local Icon. Also fixes a 'noopenner' rel typo in
FeaturedLink and points Footer's (feature-flagged) feedback icons at Heroicons.
@jamiehenson jamiehenson force-pushed the dx-1128/docs-components-presentational branch from 9d02706 to fa0d218 Compare June 25, 2026 13:54
@jamiehenson jamiehenson enabled auto-merge June 25, 2026 14:12
@jamiehenson jamiehenson temporarily deployed to ably-docs-dx-1128-docs--wewelg June 25, 2026 14:12 Inactive
@jamiehenson jamiehenson merged commit 4942a19 into main Jun 25, 2026
7 checks passed
@jamiehenson jamiehenson deleted the dx-1128/docs-components-presentational branch June 25, 2026 14:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@kennethkalmer kennethkalmer kennethkalmer approved these changes

Assignees

No one assigned

Labels

review-app Create a Heroku review app

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@jamiehenson @kennethkalmer @ably-ci